<template>
  <header class="nav">
    <div class="nav-left">
      <div class="logo" @click="$router.push('/hrview')" style="cursor: pointer;">BOSS直聘</div>
      <nav class="menu">
        <a 
          class="menu-item" 
          :class="{ active: $route.name === 'Hrview' }"
          @click="$router.push('/hrview')"
        >首页</a>
        <a 
          class="menu-item" 
          :class="{ active: $route.name === 'jobs' }"
          @click="$router.push('/jobs')"
        >职位</a>
        <a 
          class="menu-item" 
          :class="{ active: $route.name === 'companies' }"
          @click="$router.push('/companies')"
        >公司</a>
      </nav>
    </div>
    <div class="nav-right">
      <el-dropdown trigger="hover" @command="handleResumeCommand">
        <span class="resume-entry" @click="$router.push('/resume')">
          简历
          <i class="el-icon--right el-icon-arrow-down"></i>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="upload">创建简历</el-dropdown-item>
            <el-dropdown-item command="export">导出简历</el-dropdown-item>
            <el-dropdown-item command="verify">验证学历</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <div class="user" ref="userAreaRef">
        <span 
          class="username"
          :class="{ active: showUserCard }"
          @click="toggleUserCard"
        >
          {{ displayName }}
        </span>
        <img 
          class="avatar" 
          :src="user?.avatar || 'https://avatars.githubusercontent.com/u/0?v=4'" 
          alt="avatar"
          @click="toggleUserCard"
        />

        <div v-if="showUserCard" class="user-card" ref="userCardRef">
          <div class="user-card-header">
            <img 
              class="user-card-avatar" 
              :src="user?.avatar || 'https://avatars.githubusercontent.com/u/0?v=4'" 
              alt="avatar"
            />
            <div class="uc-head">
              <div class="uc-name">{{ displayName }}</div>
              <div class="uc-pos">{{ user?.email || '—' }}</div>
            </div>
          </div>
          <!-- VIP升级卡片 -->
          <div class="vip-upgrade-card" @click="goVipUpgrade">
            <div class="vip-content">
              <div class="vip-title">升级VIP</div>
              <div class="vip-subtitle">尊享7大求职权益</div>
            </div>
            <div class="vip-link">去升级 ></div>
            <div class="vip-watermark">VIP</div>
          </div>
          <div class="user-card-body">
            <div class="uc-item" @click="goAccount">账号设置</div>
            <div class="uc-item" @click="goSecurity">安全设置</div>
          </div>
          <div class="user-card-footer">
            <div class="uc-logout" @click="logout">退出登录</div>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'

const router = useRouter()
const userStore = useUserStore()

const showUserCard = ref(false)
const userAreaRef = ref(null)
const userCardRef = ref(null)

// 获取用户信息
const user = computed(() => userStore.user)
const displayName = computed(() => {
  const info = user.value || {}
  return info.username || info.name || info.phone || info.email || '用户'
})

onMounted(() => {
  document.addEventListener('click', handleGlobalClick, true)
})

onBeforeUnmount(() => {
  document.removeEventListener('click', handleGlobalClick, true)
})

function toggleUserCard() {
  showUserCard.value = !showUserCard.value
}

function handleGlobalClick(e) {
  const area = userAreaRef.value
  if (!area) return
  const target = e.target
  const clickInside = area.contains(target)
  if (!clickInside) {
    showUserCard.value = false
  }
}

function goAccount() {
  ElMessage.info('前往账号设置')
  showUserCard.value = false
}

function goSecurity() {
  ElMessage.info('前往安全设置')
  showUserCard.value = false
}

function goVipUpgrade() {
  router.push('/vip-upgrade')
  showUserCard.value = false
}

function logout() {
  userStore.logout()
  ElMessage.success('已退出登录')
  router.push('/login')
  showUserCard.value = false
}

function handleResumeCommand(command) {
  if (command === 'upload') {
    router.push('/resume/create')
  } else if (command === 'export') {
    // 导出简历功能
    ElMessage.info('导出简历功能开发中')
  } else if (command === 'verify') {
    // 验证学历功能
    ElMessage.info('验证学历功能开发中')
  }
}
</script>

<style scoped>
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 24px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(90deg, #0b0b0c 0%, #00c293 100%);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-left { display: flex; align-items: center; gap: 24px; }
.logo { font-weight: 700; font-size: 18px; color: #e9fffb; }
.menu { display: flex; gap: 16px; }
.menu-item { color: #ffffff; text-decoration: none; cursor: pointer; opacity: 0.9; }
.menu-item:hover { color: #e9fffb; opacity: 1; }
.menu-item.active { color: #e9fffb; font-weight: 600; }

.nav-right { display: flex; align-items: center; gap: 16px; }
.user { display: flex; align-items: center; gap: 8px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.username { color: #ffffff; }

.resume-entry { cursor: pointer; color: #ffffff; }
.resume-entry:hover { color: #e9fffb; }

/* 用户卡片样式 */
.user-card {
  position: absolute;
  top: 56px;
  right: 0;
  width: 240px;
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.08);
  overflow: hidden;
  z-index: 1000;
}

.user-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(90deg,#f6fffb 0%, #ffffff 100%);
}

.user-card-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.uc-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.uc-name {
  font-weight: 600;
  color: #333;
}

.uc-pos {
  font-size: 12px;
  color: #666;
}

/* VIP升级卡片 */
.vip-upgrade-card {
  margin: 12px 16px;
  padding: 12px;
  background: linear-gradient(135deg, #fff8e6 0%, #fff1cc 100%);
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.2s;
}

.vip-upgrade-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 184, 0, 0.2);
}

.vip-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vip-title {
  font-weight: 600;
  color: #fa8c16;
}

.vip-subtitle {
  font-size: 12px;
  color: #faad14;
}

.vip-link {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  font-size: 12px;
  color: #fa8c16;
}

.vip-watermark {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 24px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.8);
  transform: rotate(45deg);
  opacity: 0.5;
}

.user-card-body {
  display: grid;
}

.uc-item {
  padding: 12px 16px;
  cursor: pointer;
  color: #333;
}

.uc-item:hover {
  background: #f7f9fb;
}

.user-card-footer {
  border-top: 1px solid #f0f2f5;
}

.uc-logout {
  padding: 12px 16px;
  color: #ff4d4f;
  cursor: pointer;
}

.uc-logout:hover {
  background: #fff1f0;
}
</style>
</template>